<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 基础题库 -->
        <!-- 上方新增按钮和说明文字 -->
        <el-row type="flex" justify="space-between" style="margin-bottom:15px">
          <span style="font-size: 12px;color: pink;">说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" icon="el-icon-edit" size="mini" @click="$router.push('/questions/new')">新增试题</el-button>
        </el-row>

        <!-- 表单 -->
        <el-form ref="queryForms" :model="queryForm" label-width="80px" style="margin-bottom: 15px">
          <!-- 第一行 -->
          <el-row type="flex">
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID">
                <el-select v-model="queryForm.subjectID" size="mini" style="width:100%" @change="subjectChange">
                  <el-option
                    v-for="item in subjectList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="queryForm.catalogID" size="mini" style="width:100%">
                  <el-option v-for="item in directoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="queryForm.tags" size="mini" style="width:100%">
                  <el-option v-for="item in tagsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="queryForm.keyword" size="mini" placeholder="根据题干搜索" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row type="flex">
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="queryForm.questionType" size="mini" style="width:100%">
                  <el-option v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="queryForm.difficulty" size="mini" style="width:100%">
                  <el-option v-for="item in difficultyList"
                    :key="item.value"
                    :label="item.type"
                    :value="item.value"
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="queryForm.direction" size="mini" style="width:100%">
                  <el-option v-for="item in directionList"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="queryForm.creatorID" size="mini" style="width:100%">
                  <el-option v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                  >
                </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row type="flex">
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="queryForm.remarks" size="mini" style="width:100%"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="queryForm.shortName" size="mini" style="width:100%"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="城市" prop="province">
                <el-row type="flex">
                  <el-select
                    v-model="queryForm.province"
                    size="mini"
                    style="width:100%; margin-right: 5px;"
                    @change="provinceChange"
                  >
                    <el-option v-for="item in provinceList"
                      :key="item"
                      :label="item"
                      :value="item"
                      >
                    </el-option>
                  </el-select>
                  <el-select v-model="queryForm.city" size="mini" style="width:100%">
                    <el-option v-for="item in cityList"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item>
                <el-row type="flex" justify="end">
                  <el-button size="mini" @click="clearClick">清除</el-button>
                  <el-button size="mini" type="primary" @click="searchClick">搜索</el-button>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>

            <!-- 有多少条数据 -->
          <el-alert
              :title="`数据一共 ${total} 条`"
              type="info"
              :closable="false"
              icon="el-icon-info"
              :show-icon="true"
          />
        </el-form>

        <!-- 表格数据 -->
        <el-table style="width: 100%" :header-cell-style="{colro: '#909399', background: '#fafafa'}" :data="tableData">
          <el-table-column label="试题编号" width="120" prop="number"></el-table-column>
          <el-table-column label="学科" prop="subject"></el-table-column>
          <el-table-column label="目录" prop="catalog"></el-table-column>
          <el-table-column label="题型" prop="questionType">
            <template #default="{row}">
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2'">多选</span>
              <span v-else-if="row.questionType === '3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column label="题干" width="280" prop="question">
            <template #default="{row}">
              <span>{{h2text(row.question)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180" prop="addDate"></el-table-column>
          <el-table-column label="难度" prop="difficulty">
            <template #default="{row}">
              <span v-if="row.questionType === '1'">简单</span>
              <span v-else-if="row.questionType === '2'">一般</span>
              <span v-else-if="row.questionType === '3'">困难</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" prop="creator"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{row}">
              <el-button title="预览" type="primary" icon="el-icon-view" circle plain size="small" @click="previewClick(row)"></el-button>
              <el-button title="修改" type="success" icon="el-icon-edit" circle plain size="small" @click="$router.push({path:'/questions/new', query: {id:row.id} })"></el-button>
              <el-button title="删除" type="danger" icon="el-icon-delete" circle plain size="small" @click="deleteClick(row)"></el-button>
              <el-button title="加入精选" type="warning" icon="el-icon-check" circle plain size="small" @click="choiceClick(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-row type="flex" justify="end">
            <el-pagination
              @size-change="sChange"
              @current-change="cChange"
              background
              :page-sizes="[5,10,15,20]"
              :page-size="queryForm.pagesize"
              :page="queryForm.page"
              layout="prev, pager, next,sizes, jumper"
              :total="total"
            >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <questions-preview ref="preview" :showPreviewDialog.sync="showPreviewDialog" :previewRow="previewRow"></questions-preview>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { parseTime, html2Text } from '@/utils/index'
// 导入获取学科简单列表数据接口
import { simple as getsimpleSubjectsAPI } from '@/api/hmmm/subjects'
// 导入获取目录简单列表数据接口
import { simple as getSimpleDirectorysAPI } from '@/api/hmmm/directorys'
// 导入获取标签简单列表数据接口
import { simple as getSimpleTagsAPI } from '@/api/hmmm/tags'
// 导入获取录入人简单列表数据接口
import { simple as getsimpleUserAPI } from '@/api/base/users'
// 导入获取城市数据接口
import { provinces, citys } from '@/api/hmmm/citys'
// 导入弹层组件
import QuestionsPreview from '../components/questions-preview'
export default {
  // 注册组件
  components: {
    QuestionsPreview
  },

  data () {
    return {
      // 基础题库数据列表
      tableData: [],

      // 请求携带参数
      queryForm: {
        pagesize: 5, // 每页数量
        page: 1, // 当前页数
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },

      // 总数据条数
      total: null,

      // 学科简单列表
      subjectList: [],

      // 二级目录简单列表
      directoryList: [],

      // 标签简单列表
      tagsList: [],

      // 录入人简单用户列表
      userList: [],

      // 城市列表
      provinceList: [],

      // 地区数据列表
      cityList: [],

      // 试题类型(数据写死的列表)
      questionTypeList: [
        { value: '1', type: '单选' },
        { value: '2', type: '多选' },
        { value: '3', type: '简单' }
      ],

      // 难度 (数据写死的列表)
      difficultyList: [
        { value: '1', type: '简单' },
        { value: '2', type: '一般' },
        { value: '3', type: '困难' }
      ],

      // 方向 (数据写死的列表)
      directionList: [
        { label: 'o2o' },
        { label: '外包服务' },
        { label: '企业服务' },
        { label: '互联网金融' },
        { label: '企业咨询' },
        { label: '互联网' },
        { label: '电子商务' },
        { label: '其他' }
      ],

      // 弹层显示隐藏
      showPreviewDialog: false,
      previewRow: {}
    }
  },

  created () {
    // 调用获取基础题库列表方法
    this.getTable()

    // 调用获学科简单列表数据方法
    this.getsimpleSubjects()

    // 调用获取二级目录列表数据方法
    // this.getSimpleDirectorys()

    // 调用标签简单列表方法
    // this.getSimpleTags()

    // 调用录入人简单列表方法
    this.getsimpleUser()

    // 调用城市简单列表方法
    this.getProvinces()
  },

  methods: {
    // 获取学科简单列表数据函数
    async getsimpleSubjects () {
      try {
        const { data } = await getsimpleSubjectsAPI()
        // console.log(data)
        this.subjectList = data
      } catch (err) {
        Promise.reject(err)
      }
    },

    // 获取二级目录简单列表函数
    async getSimpleDirectorys () {
      try {
        const { data } = await getSimpleDirectorysAPI(this.queryForm)
        this.directoryList = data
      } catch (err) {
        Promise.reject(err)
      }
    },

    // 获取标签简列表函数
    async getSimpleTags () {
      try {
        const { data } = await getSimpleTagsAPI(this.queryForm)
        // console.log(data)
        this.tagsList = data
      } catch (err) {
        Promise.reject(err)
      }
    },

    // 当学科下拉框数据发生变化的时候
    subjectChange () {
      // 调用二级目录方法
      this.getSimpleDirectorys()
      // 调用标签方法
      this.getSimpleTags()
    },

    // 获取录入人简单列表函数
    async getsimpleUser () {
      try {
        const { data } = await getsimpleUserAPI()
        this.userList = data
        // console.log(data)
      } catch (err) {
        Promise.reject(err)
      }
    },

    // 获取城市函数
    getProvinces () {
      this.provinceList = provinces()
    },

    // 点击清除按钮，清空表单所有数据
    clearClick () {
      this.$refs.queryForms.resetFields()
      this.queryForm.city = ''
    },

    // 点击搜索按钮，模糊搜索对应的数据
    searchClick () {
      this.getTable()
    },

    // 当城市下拉框数据发生变化时候
    provinceChange () {
      this.queryForm.city = ''
      // 获取城市下的区数据
      this.cityList = citys(this.queryForm.province)
      //  console.log(this.cityList)
    },

    // 表格加入精选按钮
    choiceClick (row) {
      console.log(row)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        // 调用加入精选方法接口
        await choiceAdd({ ...row, choiceState: 1 })
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
        // 重新渲染
        this.getTable()
      })
    },

    // 表格点击删除按钮
    deleteClick (row) {
      // console.log(row)
      //  提示框
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用删除按钮接口方法
        await remove(row)
        if (this.tableData.length === 1 && this.queryForm.page > 1) {
          this.queryForm.page--
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新渲染
        this.getTable()
      })
    },

    // html转为text
    h2text (res) {
      return html2Text(res)
    },
    // 获取基础题库列表函数
    async getTable () {
      // 调用表格数据接口方法
      const { data } = await list(this.queryForm)
      // console.log(data)
      // 处理时间格式
      data.items.forEach(item => {
        item.addDate = parseTime(item.addDate)
      })
      this.tableData = data.items
      this.total = data.counts
    },

    // 控制弹层显示隐藏方法
    async previewClick (row) {
      this.showPreviewDialog = true
      // const { data } = await detail(row)
      // this.tableData = data
      this.previewRow = row
      this.$nextTick(() => {
        this.$refs.preview.getDetailData(this.previewRow)
      })
    },

    // 分页器
    sChange (val) {
      this.queryForm.pagesize = val
      this.getTable()
    },
    cChange (val) {
      this.queryForm.page = val
      this.getTable()
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  ::v-deep .el-pagination__jump{
    margin-left: 0;
  }
}
</style>
